<template>
  <div class="home-container" ref="pronbit">
    <navLink :language="language" @languageClick="languageClick" :active="0"></navLink>
    <!-- 关于我们 -->
    <about-us-item :language="language"></about-us-item>
    <!-- 为什么选择我 -->
    <why-choose-us :language="language"></why-choose-us>
    <!-- 产品与服务 -->
    <product-service-item :language="language"></product-service-item>
    <!-- 品牌 -->
    <div class="title_t">
      <p class="title_word"> {{ language == 'EN' ? ' Brand ' : '品牌' }}</p>
      <p :class="language == 'EN' ? 'title_line en_w_breed' : 'title_line zn_w_breed'"> </p>
      <p class="title_line_next">
        <!-- {{ language == 'EN' ? ' Brand assurance ' : '品牌保证' }} -->
      </p>
    </div>
    <div class="breed">
      <div class="content w">
        <ul>
          <li><img src="../../static/ic/1@2x.png" alt=""></li>
          <li><img src="../../static/ic/2@2x.png" alt=""></li>
          <li><img src="../../static/ic/3@2x.png" alt=""></li>
          <li><img src="../../static/ic/4@2x.png" alt=""></li>
          <li><img src="../../static/ic/5@2x.png" alt=""></li>
          <li><img src="../../static/ic/6@2x.png" alt=""></li>
          <li><img src="../../static/ic/7@2x.png" alt=""></li>
          <li><img src="../../static/ic/8@2x.png" alt=""></li>
          <li><img src="../../static/ic/9@2x.png" alt=""></li>
          <li><img src="../../static/ic/10@2x.png" alt=""></li>
          <li><img src="../../static/ic/11@2x.png" alt=""></li>
          <li><img src="../../static/ic/12@2x.png" alt=""></li>
          <li><img src="../../static/ic/13@2x.png" alt=""></li>
          <li><img src="../../static/ic/14@2x.png" alt=""></li>
          <li><img src="../../static/ic/15@2x.png" alt=""></li>
        </ul>
      </div>
    </div>
    <!-- 库存 -->
    <div class="title">
      <p class="title_word"> {{ language == 'EN' ? ' Inventory products ' : '库存产品' }}</p>
      <p :class="language == 'EN' ? 'title_line en_w_stock' : 'title_line zn_w_stock'"> </p>
      <p class="title_line_next">
        <!-- {{ language == 'EN' ? ' spot stocks ' : '现货库存' }} -->
      </p>
    </div>
    <div class="stock w">
      <div class="stock-content-left">
        <div class="th_left"><span>Part number</span> <span>Brand</span> <span>Quantity</span></div>
        <table class="w  stokc-table">

          <tbody>
            <tr>
              <td>AD8656ARZ-REEL7</td>
              <td> ADI</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>AD7997BRUZ-0</td>
              <td>ADI</td>
              <td>3550</td>
            </tr>
            <tr>
              <td>LT1167ACS8#TRPBF</td>
              <td>ADI</td>
              <td>4000</td>
            </tr>
            <tr>
              <td>LTC7001EMSE#TRPBF</td>
              <td>ADI</td>
              <td>6000</td>
            </tr>
            <tr>
              <td>AD8038AR</td>
              <td>ADI</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>AD8091ARTZ-R7</td>
              <td>ADI</td>
              <td>2361</td>
            </tr>
            <tr>
              <td>ADM3202ARUZ-REEL</td>
              <td>ADI</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>ADA4891-2ARZ</td>
              <td>ADI</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>AD570JD</td>
              <td> ADI</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>DAC8043GPZ</td>
              <td> ADI</td>
              <td>3550</td>
            </tr>
            <tr>
              <td>AM29F040B-70JI</td>
              <td> AMD</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>AM29SL800DB-100WAFT</td>
              <td>AMD</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>HDSM-431B</td>
              <td> AVAGO</td>
              <td>4660</td>
            </tr>
            <tr>
              <td>ACPL-C87B-000E</td>
              <td> AVAGO</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>ACPL-064L-560E</td>
              <td> AVAGO</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>LM4040C30FTA</td>
              <td> DIODES</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>SMAJ13CA-13-F</td>
              <td> DIODES</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>PAM2401YPADJ</td>
              <td> DIODES</td>
              <td>7800</td>
            </tr>
            <tr>
              <td>LM4040C30FTA</td>
              <td> DIODES</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>FQU2N100TU</td>
              <td> FAIRCHILD</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>FSL336LRN</td>
              <td> FAIRCHILD</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MAX14870ETC+T</td>
              <td> MAXIM</td>
              <td>3216</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="stock-content-right">
        <div class="th_left"><span>Part number</span> <span>Brand</span> <span>Quantity</span></div>
        <table class="w  stokc-table">
          <tbody>

            <tr>
              <td>MAX5815BAUD+</td>
              <td> MAXIM</td>
              <td>2300</td>
            </tr>
            <tr>
              <td>MAX233EPP+G36</td>
              <td> MAXIM</td>
              <td>2315</td>
            </tr>
            <tr>
              <td>MAX485CSA+T</td>
              <td> MAXIM</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MAX3362EKA+T</td>
              <td> MAXIM</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MAX1138EEE+T</td>
              <td> MAXIM</td>
              <td>3185</td>
            </tr>
            <tr>
              <td>ICM7555IPA+</td>
              <td> MAXIM</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MAX485CSA+T</td>
              <td> MAXIM</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>74ALVC164245DGG</td>
              <td> NEXPERIA</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>PUMD2</td>
              <td> NEXPERIA</td>
              <td>3120</td>
            </tr>
            <tr>
              <td>2N7002PS</td>
              <td> NEXPERIA</td>
              <td>4120</td>
            </tr>
            <tr>
              <td>HEF4094BT</td>
              <td> NEXPERIA</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>BCX55-16,115</td>
              <td> NEXPERIA</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MBRS340T3G</td>
              <td> ON</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>TL431BIDR2G</td>
              <td> ON</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MBRS340T3G</td>
              <td> ON</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>BSP19AT1G</td>
              <td> ON</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MC74VHC1G14DBVT1G</td>
              <td> ON</td>
              <td>7366</td>
            </tr>
            <tr>
              <td>MM3Z3V9ST1G</td>
              <td> ON</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>NDT2955</td>
              <td> ON</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>NSVRB751V40T1G</td>
              <td> ON</td>
              <td>2411</td>
            </tr>
            <tr>
              <td>NTD3055L104T4G</td>
              <td> ON</td>
              <td>2000</td>
            </tr>
            <tr>
              <td>MOCD207M</td>
              <td> ON</td>
              <td>3256</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  getAllTeamList,
  getBanner,
  getHotTeamList,
  getTeamCase,
  getTeamCustomerList,
  getVideoList,
} from "@/api/home";
import pageFooter from "../../components/pageFooter.vue";
import navLink from "../../components/navLink.vue";
import productServiceItem from "../../components/productServiceItem.vue";
import aboutUsItem from "../../components/aboutUsItem.vue";
import whyChooseUs from "../../components/whyChooseUs.vue";
export default {
  components: { pageFooter, navLink, productServiceItem, aboutUsItem, whyChooseUs },
  data() {
    return {
      teamKey: "",
      banners: ["", ""],
      demo: [
        "/images/act_1.jpg",
        "/images/banner1.jpg",
        "/images/banner2.jpg",
        "/images/bg.png",
      ],
      custormerBanner: [],
      hotTeamList: [],
      teamAllList: [],
      videoList: [],
      teamCostormerList: [],
      customerCase: [],
      swiperOption: {
        loop: true,
        speed: 800,
        autoplay: {
          delay: 3000,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        on: {
          slideChange() { },
          tap() {
            console.log("onTap", this);
          },
        },
      }
    };
  },
  created() { },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    this.init();
    document.body.scrollTo(0, 0);
  },
  destroyed: function () {
    window.removeEventListener("scroll", this.handleScroll); //  离开页面清除（移除）滚轮滚动事件
  },
  methods: {
    async init() {
    },
    // 搜索团建列表
    searchList() {
      let key = {
        text: this.teamKey,
        name: "关键词",
        value: this.teamKey,
        type: "search_key",
      };
      // if(this.teamKey == '') {
      //   this.$message({
      //     message: '搜索关键字不能为空',
      //     type: 'error'
      //   });
      //   return false
      // }
      this.$store.commit("updataMenuState", key);
      this.$router.push({ path: "/teamList" });
      console.log("搜索结果-----------------", key, "获取status", this.keyWord);
    },
    handleScroll: function () {
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 设备/屏幕高度
      let scrollObj = document.getElementById("currentSeason"); // 滚动区域
      let domTop = scrollObj.scrollTop; // div 到头部的距离
      let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop < -scrollHeight) {
        console.log("ok11111111111111111");
      } else {
        console.log("没到········");
      }
    },
    languageClick(type) {
      this.$store.commit('changeLanguage', type)
    }
  },
  computed: {
    ...mapState(["keyWord", 'language']),
  },
};
</script>
<style lang="scss" scoped>
html body {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'iconfont';
  src: url('../../static/font/iconfont.woff2?t=1708347338261') format('woff2'),
    url('../../static/font/iconfont.woff?t=1708347338261') format('woff'),
    url('../../static/font/iconfont.ttf?t=1708347338261') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.w {
  width: 1380px;
  margin: 0 auto;
}

ul li {
  list-style: none;
}

.home-container {
  width: 100%;
  box-sizing: border-box;
  font-family: "Outfit", Sans-serif;
  padding-top: 86px;

  .black_bg {
    width: 100%;
    height: 1150px;
    position: relative;
    background-color: #222d91;

    .black_bg_container {
      box-sizing: border-box;
      background-image: url(https://www.jetreq.com/wp-content/uploads/2022/12/waves-white.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0.1;
    }

    .black_container {
      max-width: 1400px;
      padding: 128px 0px 160px 0px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      position: relative;

      .about-left {
        max-width: 700px;
        color: #fff;
        font-size: 20px;

        .title {
          font-size: 76px;
          font-weight: 700;
        }

        .blue_line {
          width: 170px;
          height: 6px;
          background-color: #0267ff;
          border-radius: 3px;
          margin-bottom: 10px;
        }

        .p1 {
          margin-top: 30px;
          font-weight: 300;
        }

        .p1_title {
          margin-top: 30px;
          font-weight: 300;
        }

        .p1_green {
          margin-top: 30px;
          color: #22ae59;
        }

        .p2 {
          font-weight: 300;
          text-indent: 1rem;

          span {
            padding: 0 5px;
            font-weight: 700;
          }
        }

        .btn {
          margin-top: 50px;
          width: 142px;
          height: 47px;
          border: 2px solid #22ae59;
          color: #fff;
          font-size: 20px;
          font-weight: 500;
          line-height: 47px;
          text-align: center;
        }

        .btn:hover {
          background-color: #22ae59;
          transition: all 0.5s;
        }
      }

      .about-right {
        width: 400px;
        height: 695px;
        border-radius: 30px;
        background-image: url(https://www.jetreq.com/wp-content/uploads/2023/01/whte-jetreq-logo.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }


  }

  .choose_us {
    height: 500px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 0 80px;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;

    .left {
      height: 355px;
      width: 650px;

      // padding-top: 285px;
      h2 {
        font-size: 3rem;
        font-weight: 700;
      }

      ul li::before {
        content: "\e601";
        padding-right: 5px;
        font-family: "iconfont";
        color: #07fd40;
        font-weight: 700;
      }

      ul li {
        font-size: 1.3rem;
        margin-top: 10px;
      }
    }

    .right {
      height: 355px;
      width: 650px;
      background-color: #d62424;
      background-image: url(https://www.jetreq.com/wp-content/uploads/2022/12/pexels-athena-2582937-1-scaled-e1671352035416-1024x683.jpg);
      background-repeat: no-repeat;
      background-size: cover;

      .quata {
        background-image: url(https://www.jetreq.com/wp-content/uploads/2022/12/pexels-athena-2582937-1-scaled-e1671352035416-1024x683.jpg);
      }
    }
  }

  .head_title {
    text-align: center;
    background-color: #fff;

    h2 {
      color: #232323;
      font-size: 30px;
      height: 100px;
      line-height: 200px;
      letter-spacing: 5px;
      text-indent: 5px;
      font-family: "Gotham Bold";
      font-weight: 700;
    }

    p {
      font-size: 14px;
      height: 100px;
      display: block;
      line-height: 70px;
      color: #232323;
      letter-spacing: 5px;
      text-indent: 5px;
      font-family: "Gotham-Black";
    }
  }

  .product {
    height: 685px;
    display: flex;

    .desc {
      position: relative;
      width: 50%;

      ul {
        position: absolute;
        top: 50%;
        left: 40%;
        width: 550px;
        margin: -190px 0 0 -190px;

        li {
          height: 88px;
          margin: 40px 0;
          width: 100%;

          .ico-beihuo {
            width: 88px;
            height: 88px;
            background: #fff;
            margin: 0 48px 0 0;
            border-radius: 50%;
            float: left;
            position: relative;

          }


          .ico-tuandui {
            width: 88px;
            height: 88px;
            background: #fff;
            margin: 0 48px 0 0;
            border-radius: 50%;
            float: left;
            position: relative;
          }

          .ico-hezuo {
            width: 88px;
            height: 88px;
            background: #fff;
            margin: 0 48px 0 0;
            border-radius: 50%;
            float: left;
            position: relative;

          }

          .ico-beihuo:hover,
          .ico-tuandui:hover,
          .ico-hezuo:hover {
            transition: all 0.5s;
            transform: rotate(360deg);
          }

          .icon {
            position: absolute;
            top: 30px;
            left: 30px;
            font-size: 2rem;
            color: #0267ff;
            font-weight: 700;
          }

          b {
            line-height: 40px;
            font-size: 16px;
            color: #232323;
            display: block;
          }

          span {
            line-height: 25px;
            color: #999;
            font-family: "Helvetica Neue";
          }

          p {
            line-height: 18px;
            color: #666;
            display: block;
            height: 30px;
            font-size: 14px;
            padding-top: 10px;
          }
        }
      }
    }

    .img-box {
      width: 50%;
      background: url('../../static/images/new/shangwu.jpg') no-repeat;
      background-size: 100%;
    }
  }

  .breed {

    background: #ffffff;
    // margin-top: 106px;

    .content {



      width: 1220px;
      height: 530px;

      ul {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;

        li {
          width: 230px;
          height: 140px;
          text-decoration: none;
          // margin-bottom: 30px;
          margin: 7px;

          background: #f5f5f6;

          img {
            display: block;
            max-width: 100%;
          }
        }
      }
    }


  }

  .title_t {
    // width: 460px;
    height: 200px;
    font-family: Poppins;
    font-weight: 700;
    font-size: 40px;
    text-align: center;
    // padding-top: 40px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    background-color: #fff;

    .title_word {
      width: 100%;
      position: absolute;
      color: #171324;
      left: 0;
      top: 50px;
      z-index: 999;
      font-family: Poppins;
      font-weight: 700;
      color: #171324;
      font-size: 40px;
      text-align: center;

    }

    .title_line {
      position: absolute;

      height: 11px;
      background: #3f94f0;
      font-size: 18px;

      left: 50%;
      top: 90px;
      transform: translateX(-50%);
      border-radius: 2px;


    }

    .en_w_breed {
      width: 110px;
    }

    .zn_w_breed {
      width: 80px;
    }


    .title_line_next {
      position: absolute;
      width: 100%;
      height: 11px;
      top: 120px;
      font-family: Poppins;
      color: #666666;
      font-size: 18px;
      text-align: center;
      font-weight: 400;
    }

  }




  .title {
    width: 460px;
    height: 40px;
    font-family: Poppins;
    font-weight: 700;
    font-size: 40px;
    text-align: center;
    padding-top: 40px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;

    .title_word {
      width: 460px;
      position: absolute;
      color: #171324;
      left: 0;
      top: 41;
      z-index: 999;
    }

    .title_line {
      position: absolute;

      height: 11px;
      background: #3f94f0;

      font-size: 18px;

      left: 50%;
      bottom: -50px;
      transform: translateX(-50%);
      border-radius: 2px;


    }

    .en_w_breed {
      width: 383px;
    }

    .zn_w_breed {
      width: 160px;
    }

    .en_w_stock {
      width: 383px;
    }

    .zn_w_stock {
      width: 160px;
    }

    .title_line_next {
      position: absolute;
      width: 370px;
      height: 11px;

      color: #666666;
      font-family: Poppins;
      font-size: 18px;
      font-weight: 400;

      left: 43px;
      bottom: -70px;

    }

  }

  .stock {
    display: flex;
    width: 1380px;
    margin: 100px auto 50px;


    .stock-content-left {

      margin-left: 50px;
      margin-right: 5px;
    }

    .stock-content-right {

      margin-left: 5px;
      margin-right: 50px;
    }


    table {
      width: 650px;
      border-collapse: collapse;

    }

    th,
    td {

      width: 33.3%;
      height: 52px;
      font-family: PingFang SC;
      color: #35404e;
      font-size: 14px;
      text-align: center;
    }

    th {

      background: linear-gradient(90deg, #3f94f0 0%, #9dcbfd 100%);
    }

    .th1 {

      background: linear-gradient(90deg, #3f94f0 0%, #9dcbfd 33.3%);
    }

    .th2 {

      background: linear-gradient(90deg, #3f94f0 33.3%, #9dcbfd 66.6%);
    }

    .th3 {

      background: linear-gradient(90deg, #3f94f0 66.6%, #9dcbfd 100%);
    }

    .th_left {
      width: 650px;
      height: 56px;
      background: linear-gradient(90deg, #3f94f0 0%, #9dcbfd 100%);

      span {
        float: left;
        // display: inline-block;
        height: 100%;
        width: 33.3%;
        line-height: 56px;
        text-align: center;
        font-weight: 700;
      }
    }


    table tr:nth-child(odd) td {
      background-color: #ffffff;
    }


    table tr:nth-child(even) td {
      background-color: #f0f7ff;
    }

  }
}
</style>
<style lang="scss">
.banner {
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background-color: #fcbc06;
    opacity: 0.5;
    transform: scale(1);
  }

  .swiper-pagination-bullet-active {
    width: 40px;
    border-radius: 5px;
    opacity: 1;
  }

  .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 50px;
  }
}
</style>
